<template>
  <div class="flow-row">
    <div class="flow-box">
      <div class="flow-item" :class="{ 'flow-item-active': isActive }" @click="!readable && open('flowApproverSetting', node)">
        <div class="flow-node-box" :class="{ 'has-error': node.error }">
          <div class="node-name" :class="nameClass(node, node.type == 1 ? 'node-sp' : 'node-transact')">
            <EditName v-model:value="node.name" />
            <el-icon style="margin-left: 10px;"><UserFilled /></el-icon>
          </div>
          <div class="node-main">
            <span v-if="node.content">
              {{ node.type == 1 ? '审批人' : '办理人' }}:{{ node.content }}
            </span>
            <span v-else class="hint-title">设置此节点</span>
          </div>
          <!-- 错误提示 -->
          <el-icon v-if="node.error" class="node-error"><Warning /></el-icon>
          <div v-if="!readable && !node.deletable" class="close-icon">
            <!-- <el-icon class="el-icon-circle-close"  @click.stop="node.deletable = true"><CircleClose /></el-icon> -->
            <el-icon class="el-icon-circle-close"  @click.stop="delNode(node)"><CircleClose /></el-icon>
          </div>
          <!-- <div class="flow-node-toolbar">
            <a-icon type="copy" @click.stop="node.deletable = true" />
          </div> -->
          <!-- 删除提示 -->
          <DeleteConfirm :node="node"/>
        </div>
      </div>
      <!-- 如果子节点是意见分支,则只能添加一个意见分支 -->
      <FlowAddNode :node="node" @update:node="node = $event" :nodeType="node.type" :readable="readable"/>
      <!-- {{ node.type }} -->
    </div>
    <FlowApproverDrawer ref="flowApproverDrawer" @close="isActive = false"/>
  </div>
</template>
<script setup name="FlowApproverNode">

import flowhook from '../../../mixins/flowhook';
import FlowAddNode from '../flowAddNode.vue';
// import FlowApproverSetting from '../../FlowDrawer/Approver/index.vue';
import FlowApproverDrawer from '../drawer/FlowApproverDrawer.vue'
import EditName from '../../../common/EditName.vue';
import DeleteConfirm from '../../../common/DeleteConfirm.vue';


import { reactive, ref, createApp,defineEmits,defineProps,computed,onMounted,toRefs } from "vue";
/* 组件局部注册 */
const app = createApp({});

const {uuid,nameClass,delNode} = flowhook();

const flowApproverDrawer = ref();

const isActive = ref(false);

//注册组件
// app.component({
//   FlowAddNode, FlowApproverSetting, EditName, DeleteConfirm
// });

const props = defineProps({
  node: {
      type: Object,
      default: function () {
        return {};
      },
  },
  readable: {
      type: Boolean,
      default: false,
  },
})

const {node,readable} = toRefs(props)
 
const deleteable= ref(100);

const isShow = computed(() => {  
	return node
});


const to = () => {

}

const open = (name, node, routeNode) => {
  console.log("------开始提示")
  isActive.value = true;
  flowApproverDrawer.value.showDrawer(node, routeNode);
}
// export default {
//   name: 'FlowApproverNode',
//   components: {FlowAddNode, FlowApproverSetting, EditName, DeleteConfirm},
//   mixins: [flowMixin],
//   props: {
//     node: {
//       type: Object,
//       default: function () {
//         return {};
//       },
//     },
//     readable: {
//       type: Boolean,
//       default: false,
//     },
//   },
//   data() {
//     return {
//       deleteable: false,
//     };
//   },
//   methods: {},
//   computed: {
//     isShow() {
//       return this.node
//     }
//   },
//   watch:{
//     isShow(newV,oldV){
//       console.log(newV,oldV)
//     }
//   },
//   mounted() {
//     console.log("------------app",JSON.stringify(this.node))
//   }
// };
</script>
